// input点击边框变颜色
// 获取元素
let input = document.querySelectorAll('.input_one')
let lab = document.querySelectorAll('label')
let span = document.querySelectorAll('.login_right_main_3 span')
let sub = document.querySelector('.input_sub')
let su=document.querySelectorAll('.login_right_main_3 p span')
let first=document.querySelector('.login_right_main_3 p .first')
let chek=document.querySelector('.input_checkbox')
// console.log(su)

// 遍历
for (let i = 0; i < input.length; i++) {
    input[i].onfocus = function () {
        // this.style.borderColor='red'
        // console.log(111)

        lab[i].style.fontSize = '12px'
        lab[i].style.top = '-18px'
        for (let j = 0; j < input.length; j++) {
            input[j].style.border = 0
        }
        this.style.border = '1px solid rgb(255, 106, 0)'
    }
    //   失去焦点后的样式
    input[i].onblur = function () {
        // this.style.borderColor='red'
        // console.log(111)
        let va = input[i].value
        //    console.log(va)
        if (!va) {
            lab[i].style.fontSize = '16px'
            lab[i].style.top = '0px'
            input[i].style.border = 0
        } else if (va) {
            lab[i].style.fontSize = '12px'
            lab[i].style.top = '-18px'
            input[i].style.border = 0
        }
    }
}


// 匹配正则
// 获取元素

async function denglu() {
    let vau = input[0].value
    let pass = input[1].value
    let pas = input[2].value
    sub.style.backgroundColor='#ff7e29'
    if (namecheck() && passcheck() && surcheck()&&chek.checked) {
        // console.log(vau, pass, pas)
        first.style.display='none'
        // 发送ajax请求,获取数据，判断是否存在
        let {data} = await axios.get('http://localhost:3000/users?name='+vau)
        console.log(data[0])
        if(data[0]){
        alert('用户已存在')
       }else{
        axios.post('http://localhost:3000/users',{
                        name:vau,
                        password:pass}) 
                .then(function(response){
                    alert('注册成功')
                    // location.href="http://localhost/xiaomi/html/login.html" 
                    
                })
            }
    }else if(chek.checked==false){
        first.style.display='block'
        return
    }

}
// 用户名正则匹配
// 获取焦点
function namecheck(skr) {
    let reg = /^[\u4e00-\u9fa5]{2,4}$/
    let vau = input[0].value
    //    console.log(span)
    if (vau == '') {
        lab[0].style.fontSize = '16px'
        lab[0].style.top = '0px'
        input[0].style.border = 0
        span[0].style.display = 'none'

    } else if (!reg.test(vau)) {
        span[0].style.display = 'block'
        // console.log(span[0])
        return
    } else {
        span[0].style.display = 'none'
        input[0].style.border = 0
        return true
    }


}
// 密码正则匹配
function passcheck(skr) {
    let reg = /^(\w){6,20}$/;
    let pwd = input[1].value
    if (pwd == '') {
        lab[1].style.fontSize = '16px'
        lab[1].style.top = '0px'
        input[1].style.border = 0
        span[1].style.display = 'none'

    } else if (!reg.test(pwd)) {
        span[1].style.display = 'block'
        return false
    } else {
        span[1].style.display = 'none'
        input[1].style.border = 0
        return true;
    }
}
// 确认密码正则匹配
function surcheck(skr) {
    let pwd = input[1].value
    let pw2 = input[2].value
    if (pw2 == '') {
        lab[2].style.fontSize = '16px'
        lab[2].style.top = '0px'
        input[2].style.border = 0
        span[2].style.display = 'none'

    } else if (pwd != pw2) {
        span[2].style.display = 'block'
        return
    } else {
        span[2].style.display = 'none'
        input[2].style.border = 0
        return true
    }
}

// 点击协议
function agreement(){
    location.href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html"
}

// / 隐私
function yins(){
    location.href="https://privacy.mi.com/miaccount/zh_CN/"
}



